<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LOUIS VUITTON</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <nav class="top-nav">
            <div class="nav-left">
                <button class="menu-btn">Menu</button>
                <button class="search-btn">Search</button>
            </div>
            <div class="logo">
                <a href="/">LOUIS VUITTON</a>
            </div>
            <div class="nav-right">
                <button class="call-btn">Call Us</button>
                <button class="wishlist-btn">Wishlist</button>
                <button class="account-btn">Account</button>
                <button class="cart-btn">Cart</button>
            </div>
        </nav>
    </header>

    <main>
        <div class="category-nav">
            <ul>
                <li><a href="index.html">All Brands</a></li>
                <li class="active"><a href="lv.html">Louis Vuitton</a></li>
                <li><a href="dior.html">Dior</a></li>
                <li><a href="chanel.html">Chanel</a></li>
                <li><a href="hermes.html">Hermès</a></li>
                <li><a href="gucci.html">Gucci</a></li>
            </ul>
        </div>

        <div class="category-banner">
            <div class="banner-content">
                <h1>Card Holders</h1>
                <p>Streamlined designs adorned with the Maison's heritage emblems unveil ideal on-the-go companions — featuring Louis Vuitton's signatures.</p>
            </div>
        </div>

        <div class="products-grid">
            <a href="detail.html" class="product-card" data-category="card">
                <div class="product-image">
                    <img src="https://us.louisvuitton.com/images/is/image/lv/1/PP_VP_L/louis-vuitton-double-card-holder-monogram-eclipse-canvas-card-holders-and-wallets--M80143_PM2_Front%20view.png" alt="Double Card Holder">
                </div>
                <div class="product-info">
                    <h3>Double Card Holder</h3>
                    <p class="description">Monogram Eclipse canvas</p>
                    <p class="price">HK$ 2,850</p>
                </div>
            </a>
            <a href="detail.html" class="product-card" data-category="card">
                <div class="product-image">
                    <img src="https://us.louisvuitton.com/images/is/image/lv/1/PP_VP_L/louis-vuitton-pocket-organizer-damier-graphite-canvas-wallets-and-small-leather-goods--N63143_PM2_Front%20view.png" alt="Pocket Organizer">
                </div>
                <div class="product-info">
                    <h3>Pocket Organizer</h3>
                    <p class="description">Damier Graphite canvas</p>
                    <p class="price">HK$ 3,350</p>
                </div>
            </a>
            <!-- 添加更多产品... -->
        </div>
    </main>

    <footer>
        <!-- 复用相同的footer -->
    </footer>

    <script src="js/main.js"></script>
</body>
</html> 